<!-- 订单管理 -->
<template>
  <div class="dashboard-container order-list customer-list-box">
    <div class="app-container">
      <!-- 搜索 -->
      <el-card
        shadow="never"
        class="search-card-box"
        style="margin-bottom: 20px;"
      >
        <el-form
          ref="orderManageSearchForm"
          label-width="90px"
          :model="orderManageSearchForm"
        >
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item
                label="订单编号:"
              >
                <el-input
                  v-model="orderManageSearchForm.id"
                  placeholder="请输入订单编号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="订单状态:"
              >
                <el-select
                  v-model="orderManageSearchForm.status"
                  placeholder="请选择订单状态"
                  clearable
                >
                  <el-option
                    v-for="item in orderStatusList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="付费状态:"
              >
                <el-select
                  v-model="orderManageSearchForm.paymentStatus"
                  placeholder="请选择付费状态"
                  clearable
                >
                  <el-option
                    v-for="item in paymentStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="发件人姓名:"
              >
                <el-input
                  v-model="orderManageSearchForm.senderName"
                  placeholder="请输入发件人姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="发件人电话:"
              >
                <el-input
                  v-model="orderManageSearchForm.senderPhone"
                  placeholder="请输入发件人电话"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="发件人地址:"
                class="page-form-item"
              >
                <el-select
                  v-model="orderManageSearchForm.senderProvinceId"
                  placeholder="请选择省"
                  clearable
                  @clear="clearProvince"
                  @change="handleChangeProvince"
                >
                  <el-option
                    v-for="item in senderProvinceList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="orderManageSearchForm.senderCityId"
                  placeholder="请选择市"
                  clearable
                  @change="handleChangeCity"
                  @clear="clearCity"
                >
                  <el-option
                    v-for="item in senderCityList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="orderManageSearchForm.senderCountyId"
                  placeholder="请选择县/区"
                  clearable
                >
                  <el-option
                    v-for="item in senderCountyList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="发件人姓名:"
              >
                <el-input
                  v-model="orderManageSearchForm.receiverName"
                  placeholder="请输入发件人姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="收件人电话:"
              >
                <el-input
                  v-model="orderManageSearchForm.receiverPhone"
                  placeholder="请输入收件人电话"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="收件人地址:"
                class="page-form-item"
              >
                <el-select
                  v-model="orderManageSearchForm.receiverProvinceId"
                  placeholder="请选择省"
                  clearable
                  @clear="clearReceiverProvince"
                  @change="handleReceiverChangeProvince"
                >
                  <el-option
                    v-for="item in receiverProvinceList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="orderManageSearchForm.receiverCityId"
                  placeholder="请选择市"
                  clearable
                  @change="handleReceiverChangeCity"
                  @clear="clearReceiverCity"
                >
                  <el-option
                    v-for="item in receiverCityList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="orderManageSearchForm.receiverCountyId"
                  placeholder="请选择县/区"
                  clearable
                >
                  <el-option
                    v-for="item in receiverCountyList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button
                type="warning"
                @click="searchFn"
              >搜索</el-button>
              <el-button
                plain
                class="reset-btn"
                @click="resetSearchForm('orderManageSearchForm')"
              >重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <div
        v-loading="listLoading"
        :class="{ 'loading-box': listLoading }"
        element-loading-text="加载中"
        style="margin-top: 20px"
      >
        <el-card
          class="table-card-box"
          shadow="never"
        >
          <el-table
            :key="tableKey"
            ref="multipleTable"
            :data="dataList"
            fit
            style="width: 100%"
            stripe
            :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
            @selection-change="handleSelectionChange"
          >
            <div
              v-show="
                (!dataList || dataList.length <= 0) &&
                  !listLoading &&
                  !searchkey
              "
              slot="empty"
            >
              <img
                src="@/icons/pic-kong.png"
                alt="img"
                style="margin-top: 20px; width: 20%; height: 20%"
              />
              <p style="margin-top: -20px; padding-bottom: 0px">这里空空如也</p>
            </div>
            <el-card
              v-show="
                (!dataList || dataList.length <= 0) && !listLoading && searchkey
              "
              slot="empty"
              class="table-empty-box"
              shadow="never"
            >
              <empty></empty>
            </el-card>
            <el-table-column
              align="left"
              type="index"
              label="序号"
              width="60"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.$index +
                    (orderSearchFormData.page - 1) *
                    orderSearchFormData.pageSize +
                    1
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="订单编号"
              min-width="160px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="运单编号"
              min-width="130px"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.transportOrder === null
                    ? ''
                    : scope.row.transportOrder.id
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="下单时间"
              min-width="160px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="订单状态"
              min-width="90px"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.status == ' 23000'">待取件</span>
                <span v-else-if="scope.row.status == '23001'">已取件</span>
                <span v-else-if="scope.row.status == '23002'">网点自寄</span>
                <span v-else-if="scope.row.status == '23003'">网点入库</span>
                <span v-else-if="scope.row.status == '23004'">待装车</span>
                <span v-else-if="scope.row.status == '23005'">运输中</span>
                <span v-else-if="scope.row.status == '23006'">网点出库</span>
                <span v-else-if="scope.row.status == '23007'">待派送</span>
                <span v-else-if="scope.row.status == '23008'">派送中</span>
                <span v-else-if="scope.row.status == '23009'">已签收</span>
                <span v-else-if="scope.row.status == '23010'">拒收</span>
                <span v-else>已取消</span>
              </template>
            </el-table-column>

            <el-table-column
              align="left"
              label="发件人姓名"
              min-width="100"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.senderName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="发件人电话"
              min-width="120"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.senderPhone }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="发件人地址"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.senderProvince === null
                    ? ''
                    : scope.row.senderProvince.name
                }}</span>
                <span>{{
                  scope.row.senderCity === null ? '' : scope.row.senderCity.name
                }}</span>
                <span>{{
                  scope.row.senderCounty === null
                    ? ''
                    : scope.row.senderCounty.name
                }}</span>
                <span>{{ scope.row.senderAddress }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="收件人姓名"
              min-width="100"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.receiverName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="收件人电话"
              min-width="120"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.receiverPhone }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="收件人地址"
              min-width="120"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.receiverProvince === null
                    ? ''
                    : scope.row.receiverProvince.name
                }}</span>
                <span>{{
                  scope.row.receiverCity === null
                    ? ''
                    : scope.row.receiverCity.name
                }}</span>
                <span>{{
                  scope.row.receiverCounty === null
                    ? ''
                    : scope.row.receiverCounty.name
                }}</span>
                <span>{{ scope.row.receiverAddress }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="取件类型"
              min-width="100"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.pickupType == 1">网点自寄</span>
                <span v-else>上门取件</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="付费类型"
              min-width="100"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.paymentMethod == 1">预结</span>
                <span v-else>到付</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="付费状态"
              min-width="100"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.paymentStatus == 1">未付</span>
                <span v-else>已付</span>
              </template>
            </el-table-column>
            <!-- 操作按钮 -->
            <el-table-column
              align="center"
              label="操作"
              width="85"
              fixed="right"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-link
                  v-if="
                    scope.row.status == '23002' && scope.row.pickupType == 1
                  "
                  type="primary"
                  :underline="false"
                  @click="handleOrderDetail(scope.row.id, scope.row.pickupType)"
                >编辑详情</el-link>
                <el-link
                  v-else
                  type="primary"
                  :underline="false"
                  @click="
                    handleOrderDetail(
                      scope.row.id,
                      scope.row.status,
                      scope.row.pickupType,
                      scope.row.transportOrder === null
                        ? ''
                        : scope.row.transportOrder.id
                    )
                  "
                >查看详情</el-link>
              </template>
            </el-table-column>
          </el-table>
          <!-- end -->
          <!-- 分页 -->
          <div class="pagination">
            <div
              v-show="dataList && dataList.length > 0"
              class="pages"
            >
              <el-pagination
                :current-page="Number(orderSearchFormData.page)"
                :total="Number(total)"
                :page-size="Number(orderSearchFormData.pageSize)"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
          <!-- end -->
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import orderStatus from '@/api/orderstatus.json'
import { orderList } from '@/api/order'
import options from '@/api/orderstatus.json'
import pickupoptions from '@/api/pickupstatus.json'
import { areaList } from '@/api/common'
export default {
  data() {
    return {
      // 搜索表单
      orderManageSearchForm: {
        page: 1,
        pageSize: 10,
        id: '',
        senderName: '',
        senderPhone: '',
        receiverName: '',
        receiverPhone: '',
        status: '',
        pickUpType: '',
        senderProvinceId: '',
        senderCityId: '',
        senderCountyId: '',
        receiverProvinceId: '',
        receiverCityId: '',
        receiverCountyId: '',
        paymentStatus: ''
      },
      orderStatusList: orderStatus,
      paymentStatusList: [
        {
          value: 1,
          label: '未付'
        },
        {
          value: 2,
          label: '已付'
        }
      ],
      senderQuery: {
        parentId: 0
      },
      receiverQuery: {
        parentId: 0
      },
      // 发件人省份列表
      senderProvinceList: [],
      // 发件人城市列表
      senderCityList: [],
      // 发件人区县列表
      senderCountyList: [],
      // 发件人省份列表
      receiverProvinceList: [],
      // 发件人城市列表
      receiverCityList: [],
      // 发件人区县列表
      receiverCountyList: [],
      orderId: '',
      multipleSelection: [],
      provinceList: [],
      cityList: [],
      countryList: [],
      countryReceiverList: [],
      orderStatusOptions: '',
      pickUpTypeOptions: '',
      paymentStatusOptions: [
        {
          id: 1,
          name: '未付'
        },
        {
          id: 2,
          name: '已付'
        }
      ],
      tableKey: 0,
      dataList: [],
      total: null,
      listLoading: true,
      searchkey: false,
      orderSearchFormData: {
        page: 1,
        pageSize: 10,
        id: '',
        senderPhone: '',
        receiverName: '',
        receiverPhone: '',
        status: '',
        pickUpType: '',
        // 收件人
        senderProvinceId: '',
        senderCityId: '',
        senderCountyId: '',
        // 派件人
        receiverProvinceId: '',
        receiverCityId: '',
        receiverCountyId: '',
        paymentStatus: ''
      },
      requestParamsProvince: {}
    }
  },
  created() {
    this.getProvinceList()
    this.getReceiverProvinceList()
    this.orderStatusOptions = options // 订单状态
    this.pickUpTypeOptions = pickupoptions // 取件类型
    this.orderSearchFormData.status = this.$route.query.status
      ? Number(this.$route.query.status)
      : '' // 三元表达式判断是否有值
    var _this = this
    this.initialDate() // 初始化日期数据

    // 键盘enter操作
    document.onkeydown = function(e) {
      var key = window.event.keyCode
      if (key === 13) {
        _this.orderSearchFormData = {
          ..._this.orderSearchFormData,
          status:
            _this.orderSearchFormData.status === 0
              ? ''
              : _this.orderSearchFormData.status
        }
        _this.handleFilter(this.orderSearchFormData)
      }
    }
  },
  methods: {
    // 获取发件人省份地区列表数据
    async getProvinceList() {
      await areaList(this.senderQuery).then((res) => {
        if (res.code === 200) {
          // console.log(res)
          this.senderProvinceList = res.data
        } else {
          this.$message.error(res.msg || '获取地区列表失败')
        }
      })
    },
    // 获取发件人城市地区列表数据
    async getCityList() {
      if (this.senderQuery.parentId > 0) {
        await areaList(this.senderQuery).then((res) => {
          if (res.code === 200) {
            // console.log(res)
            this.senderCityList = res.data
          } else {
            this.$message.error(res.msg || '获取地区列表失败')
          }
        })
      }
    },
    // 获取发件人县/区地区列表数据
    async getCountyList() {
      if (this.senderQuery.parentId > 0) {
        await areaList(this.senderQuery).then((res) => {
          if (res.code === 200) {
            // console.log(res)
            this.senderCountyList = res.data
          } else {
            this.$message.error(res.msg || '获取地区列表失败')
          }
        })
      }
    },
    // 发件人省份改变
    handleChangeProvince(val) {
      // console.log(val)
      this.senderQuery.parentId = val
      this.getCityList()
    },
    // 发件人清空省份
    clearProvince() {
      // console.log('清空省份')
      this.senderQuery.parentId = 0
      this.orderManageSearchForm.senderCityId = ''
      this.orderManageSearchForm.senderCountyId = ''
      this.orderManageSearchForm.senderProvinceId = ''
      this.senderCityList = []
      this.senderCountyList = []
      this.getProvinceList()
    },
    // 发件人城市改变
    handleChangeCity(val) {
      // console.log(val)
      this.senderQuery.parentId = val
      this.getCountyList()
    },
    // 发件人清空城市
    clearCity() {
      // console.log('清空城市')
      // console.log('清空城市', this.orderManageSearchForm.senderProvinceId)
      this.senderQuery.parentId = this.orderManageSearchForm.senderProvinceId
      this.orderManageSearchForm.senderCityId = ''
      this.orderManageSearchForm.senderCountyId = ''
      this.senderCountyList = []
      this.getCityList()
    },

    // 收件人获取省份列表数据
    async getReceiverProvinceList() {
      await areaList(this.receiverQuery).then((res) => {
        if (res.code === 200) {
          // console.log(res)
          this.receiverProvinceList = res.data
        } else {
          this.$message.error(res.msg || '获取地区列表失败')
        }
      })
    },
    // 获取收件人城市地区列表数据
    async getReceiverCityList() {
      if (this.receiverQuery.parentId > 0) {
        await areaList(this.receiverQuery).then((res) => {
          if (res.code === 200) {
            // console.log(res)
            this.receiverCityList = res.data
          } else {
            this.$message.error(res.msg || '获取地区列表失败')
          }
        })
      }
    },
    // 获取收件人县/区地区列表数据
    async getReceiverCountyList() {
      if (this.receiverQuery.parentId > 0) {
        await areaList(this.receiverQuery).then((res) => {
          if (res.code === 200) {
            // console.log(res)
            this.receiverCountyList = res.data
          } else {
            this.$message.error(res.msg || '获取地区列表失败')
          }
        })
      }
    },
    // 收件人省份改变
    handleReceiverChangeProvince(val) {
      // console.log(val)
      this.receiverQuery.parentId = val
      this.getReceiverCityList()
    },
    // 收件人清空省份
    clearReceiverProvince() {
      // console.log('清空省份')
      this.receiverQuery.parentId = 0
      this.orderManageSearchForm.receiverCityId = ''
      this.orderManageSearchForm.receiverCountyId = ''
      this.orderManageSearchForm.receiverProvinceId = ''
      this.receiverCityList = []
      this.receiverCountyList = []
      this.getReceiverProvinceList()
    },
    // 收件人城市改变
    handleReceiverChangeCity(val) {
      // console.log(val)
      this.receiverQuery.parentId = val
      this.getReceiverCountyList()
    },
    // 收件人清空城市
    clearReceiverCity() {
      // console.log('清空城市')
      console.log('清空城市', this.orderManageSearchForm.receiverProvinceId)
      this.receiverQuery.parentId = this.orderManageSearchForm.receiverProvinceId
      this.orderManageSearchForm.receiverCityId = ''
      this.orderManageSearchForm.receiverCountyId = ''
      this.receiverCountyList = []
      this.getReceiverCityList()
    },
    // 搜索
    searchFn() {
      console.log('搜索', this.orderManageSearchForm)
    },
    setField() {
      // 对搜索项属性设置响应式，便于重置方法生效
      this.$set(this.orderManageSearchForm, 'id')
      this.$set(this.orderManageSearchForm, 'senderName')
      this.$set(this.orderManageSearchForm, 'senderPhone')
      this.$set(this.orderManageSearchForm, 'receiverName')
      this.$set(this.orderManageSearchForm, 'receiverPhone')
      this.$set(this.orderManageSearchForm, 'status')
      this.$set(this.orderManageSearchForm, 'pickUpType')
      this.$set(this.orderManageSearchForm, 'senderProvinceId')
      this.$set(this.orderManageSearchForm, 'senderCityId')
      this.$set(this.orderManageSearchForm, 'senderCountyId')
      this.$set(this.orderManageSearchForm, 'receiverProvinceId')
      this.$set(this.orderManageSearchForm, 'receiverCityId')
      this.$set(this.orderManageSearchForm, 'receiverCountyId')
      this.$set(this.orderManageSearchForm, 'paymentStatus')
    },
    // 重置
    resetSearchForm(formName) {
      this.setField()
      this.$refs[formName].resetFields()
    },
    // 初始数据
    initialDate() {
      // 读取数据
      this.getList()
    },
    // 数据变化时触发，赋予数据
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 获取订单列表数据
    async getList() {
      this.listLoading = true
      // 查询
      const { data: res } = await orderList(this.orderSearchFormData)
      this.listLoading = false
      // 获取数据给dataList
      this.dataList = res.items
      // 获取总条数
      this.total = res.counts
    },
    // 重置
    resetForm(formData) {
      // this.getList()
      this.$refs[formData].resetFields()
      this.cityList = {}
      this.orderSearchFormData.page = 1
      this.orderSearchFormData.pageSize = 10
      this.orderSearchFormData.id = ''
      this.orderSearchFormData.status = ''
      this.orderSearchFormData.paymentStatus = ''
      this.orderSearchFormData.senderName = ''
      this.orderSearchFormData.senderPhone = ''
      this.orderSearchFormData.receiverName = ''
      this.orderSearchFormData.receiverPhone = ''

      this.orderSearchFormData.receiverCityId = ''
      this.orderSearchFormData.receiverCountyId = ''
      this.orderSearchFormData.receiverProvinceId = ''

      this.orderSearchFormData.senderProvinceId = ''
      this.orderSearchFormData.senderCityId = ''
      this.orderSearchFormData.senderCountyId = ''
      this.searchkey = false
      this.getList()
    },
    // 搜索信息
    handleFilter(opt) {
      this.orderSearchFormData = {
        ...this.orderSearchFormData,
        status:
          this.orderSearchFormData.status === 0
            ? ''
            : this.orderSearchFormData.status
        // page: opt === '查询' ? 1 : this.orderSearchFormData.page
      }
      this.orderSearchFormData.page = 1
      this.getList(this.orderSearchFormData)
      this.searchkey = true
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.orderSearchFormData.pageSize = val
      if (this.orderSearchFormData.page === 1) {
        this.getList(this.orderSearchFormData)
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.orderSearchFormData.page = val
      this.getList()
    },
    // 订单详情
    handleOrderDetail(id, status, pickupType, transportOrderId) {
      // eslint-disable-next-line object-curly-spacing
      this.$router.push({
        path: '/business/edit-order',
        query: {
          orderId: id,
          status: status,
          pickUpType: pickupType,
          transportOrderId
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}

// 下拉框
::v-deep .el-select {
  width: 100%;
}

::v-deep .el-card__body {
  .page-form-item {
    .el-form-item__content {
      display: flex;
    }
  }
}
</style>

<style lang="scss" scoped>
.order-list ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
</style>
